<template>
  <div>
    <h1>欢迎光临</h1>
    <h2>苹果10$/斤,折扣八折</h2>
    请输入你要购买的斤数:
    <input type="text" v-model.number="apple" />
    <hr />
    <button @click="btnClick">结账买单</button>
    <hr />
    <div>结账单:总价{{ num }}$元,折后价:{{ num2 }}$元,省了{{ num3 }}$元</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      apple: "",
      num: 0,
      num2: 0,
      num3: 0,
    };
  },
  methods: {
    btnClick() {
      this.num = this.apple * 10;
      this.num2 = this.apple * 10 * 0.8;
      this.num3 = this.apple * 10 * 0.2;
    },
  },
};
</script>

<style>
</style>